<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>26_盒子模型-外边距-不同元素显示模式设置外边距</title>
        <style>
            /*  块级元素 */
            /* div {
                width: 200px;
                height: 200px;
                background-color: aqua;
                margin: 10px;
            } */

            /* 行内元素 */
            /* span {
                border: 1px solid black;
                background-color: red;
                margin: 30px;
            } */

            /* 行内块 */
            img {
                margin: 50px;
            }
        </style>
    </head>
    <body>
        <!-- 块级元素 -->
        <!-- <div></div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, asperiores!</p> -->
    
        <!-- 行内元素 -->
        <!--  对于行内元素，左右外边距可以完美设置，上下外边距设置无效。 -->
        <!-- <span>今天晚上自己上厕所</span>
        <div>hahah</div> -->

        <!-- 行内块 -->
        <img src="./img/mzq.jpg" alt="">
        <div>你也今晚自己上厕所</div>
    
    </body>
</html>